<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倒计时</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <style>
      .wrap {
        width: 200px;
        height: 300px;
        margin: 100px auto;
        background: #e83731;
        position: relative;
      }

      .wrap h3 {
        font-size: 30px;
        line-height: 80px;
        font-weight: 800;
        text-align: center;
        margin-top: 25px;
        color: #fff;
      }

      .wrap p {
        width: 200px;
        height: 300px;
        font-size: 20px;
        color: #fff;
        opacity: 0.6;
        text-align: center;
      }

      .wrap h4 {
        font-size: 15px;
        line-height: 20px;
        text-align: center;
        position: absolute;
        top: 185px;
        left: 55px;
        color: #fff;
      }

      .wrap img {
        width: 20px;
        height: 30px;
        position: absolute;
        top: 130px;
        left: 90px;
      }

      #hour {
        width: 35px;
        height: 35px;
        background: black;
        position: absolute;
        top: 230px;
        left: 30px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 35px;
      }

      .m1 {
        font-size: 20px;
        color: #fff;
        position: absolute;
        top: 230px;
        left: 70px;
      }

      #minute {
        width: 35px;
        height: 35px;
        background: black;
        position: absolute;
        top: 230px;
        left: 80px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 35px;
      }

      .m2 {
        font-size: 20px;
        color: #fff;
        position: absolute;
        top: 230px;
        left: 120px;
        text-align: center;
      }

      #second {
        width: 35px;
        height: 35px;
        background: black;
        position: absolute;
        top: 230px;
        left: 130px;
        font-size: 20px;
        color: #fff;
        text-align: center;
        line-height: 35px;
      }
    </style>
  </head>

  <body>
    <div class="wrap">
      <h3>倒计时</h3>
      <p>COUNT DOWN</p>
      <img src="../img/bgpic.gif" alt="" />
      <h4>距离结束还剩</h4>

      <div id="hour"></div>
      <div class="m1">:</div>
      <div id="minute"></div>
      <div class="m2">:</div>
      <div id="second"></div>
    </div>
    <script>
      function timerOver() {
        var oH = document.getElementById("hour");
        var oM = document.getElementById("minute");
        var oS = document.getElementById("second");

        var startTime = new Date();
        var overTime = new Date("2022-11-13 12:00:00");
        //得到秒数
        var ss = Math.floor((overTime - startTime) / 1000);
        var h = Math.floor((ss / 3600) % 24);
        var m = Math.floor((ss / 60) % 60);
        var s = Math.floor(ss % 60);

        oH.innerHTML = h;
        oM.innerHTML = m;
        oS.innerHTML = s;
        //判断时间是否倒完
        if (ss <= 0) {
          clearInterval(timer);
          oH.innerHTML = "已";
          oM.innerHTML = "结";
          oS.innerHTML = "束";
        }
      }
      timerOver();
      var timer = setInterval(timerOver, 1000);
    </script>
  </body>
</html>
